<%--
  Created by IntelliJ IDEA.
  User: 15253
  Date: 2023/4/1
  Time: 18:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!--https://vanillawebprojects.com/projects/movie-seat-booking/-->
<!--https://vanillawebprojects.com/projects/movie-seat-booking/-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <link rel="stylesheet" href="css/style.css"/>
  <title>movie seat booking</title>
</head>
<body>
<form action="<%=request.getContextPath()%>/user/login" method="post">
<div class="movie-container">
  <label>选择停车场 : </label>
  <select id="movie">
    <option value="32">金宇文苑停车场</option>
    <option value="38">内大北区停车场</option>
    <option value="35">内大东区停车场</option>
    <option value="30">满都海停车场</option>
  </select>
</div>

<ul class="showcase">
  <li>
    <div class="seat"></div>
    <small>空车位</small>
  </li>
  <li>
    <div class="seat seatshow"></div>
    <small>选择车位</small>
  </li>
  <li>
    <div class="seat occupied"></div>
    <small>有车</small>
  </li>
</ul>

<div class="seat-container">
  <div class="row">
    <div class="seat" align="center">A1001</div>
    <div class="seat" align="center">A1002</div>
    <div class="seat" align="center">B1001</div>
    <div class="seat occupied" align="center">B1002</div>
    <div class="seat" align="center">B1003</div>
    <div class="seat" align="center">B1004</div>
    <div class="seat occupied" align="center">C1001</div>
    <div class="seat" align="center">C1002</div>
  </div>

  <div class="row">
    <div class="seat" align="center">A2001</div>
    <div class="seat" align="center">A2002</div>
    <div class="seat" align="center">B2001</div>
    <div class="seat" align="center">B2002</div>
    <div class="seat" align="center">B2003</div>
    <div class="seat occupied" align="center">B2004</div>
    <div class="seat" align="center">C2001</div>
    <div class="seat" align="center">C2002</div>
  </div>

  <div class="row">
    <div class="seat" align="center">A3001</div>
    <div class="seat" align="center">A3002</div>
    <div class="seat" align="center">B3001</div>
    <div class="seat" align="center">B3002</div>
    <div class="seat" align="center">B3003</div>
    <div class="seat occupied" align="center">B3004</div>
    <div class="seat occupied" align="center">C3001</div>
    <div class="seat" align="center">C3002</div>
  </div>

  <div class="row">
    <div class="seat" align="center">A4001</div>
    <div class="seat" align="center">A4002</div>
    <div class="seat" align="center">B4001</div>
    <div class="seat occupied" align="center">B4002</div>
    <div class="seat occupied" align="center">B4003</div>
    <div class="seat" align="center">B4004</div>
    <div class="seat" align="center">C4001</div>
    <div class="seat" align="center">C4002</div>
  </div>

  <div class="row">
    <div class="seat" align="center">A5001</div>
    <div class="seat" align="center">A5002</div>
    <div class="seat" align="center">B5001</div>
    <div class="seat" align="center">B5002</div>
    <div class="seat" align="center">B5003</div>
    <div class="seat" align="center">B5004</div>
    <div class="seat" align="center">C5001</div>
    <div class="seat" align="center">C5002</div>
  </div>

  <div class="row">
    <div class="seat" align="center">A6001</div>
    <div class="seat" align="center">A6002</div>
    <div class="seat" align="center">B6001</div>
    <div class="seat occupied" align="center">B6002</div>
    <div class="seat occupied" align="center">B6003</div>
    <div class="seat" align="center">B6004</div>
    <div class="seat" align="center">C6001</div>
    <div class="seat" align="center">C6002</div>
  </div>

  <div class="row">
    <div class="ttqyk">
      <div class="seat1"></div>
      <div class="seat1"></div>
    </div>
  </div>
  <div class="text">
    <p>You have selected <span id=num>num</span>
      seats for a price of
      <span id="price">price</span>
    </p>
  </div>
</div>
<script src="js/script.js"></script>
</form>
</body>
</html>